<template>
	<scroll-view class="member-center" scroll-y @touchstart="handleTouchStart" @touchmove="handleTouchMove"
		@touchend="handleTouchEnd">
		<view class="container" :style="{ paddingTop: bgHeight + 'rpx' }">
			<navBar :title="t('address.edit')"></navBar>
			<!-- 头部区域 -->
			<view class="header-section">
				<view class="header-content">
					<view class="header-text">
						<view class="header-title">{{t('product.title')}},</view>
						<view class="header-subtitle">{{t('product.ArriveIn')}}
							<p style="color: #fd2d55;">7 {{t('common.Days')}}</p>
						</view>
						<view class="header-stats">
							<text class="highlight">95%+</text> {{t('product.ApprovalRate')}}
							<text class="highlight">30k</text> {{t('product.creators')}}!
						</view>
					</view>
					<view class="header-image">
						<image src="../../static/product/icon.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 分类选项卡 -->
			<view class="category-tabs">
				<tn-tabs bar-color='#fd2d55' active-color='#fd2d55'>
					<tn-tabs-item v-for="(item, index) in tabs" :key="index" :title="item.text"></tn-tabs-item>
				</tn-tabs>
				<!-- <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ active: currentTab === index }"
				@tap="switchTab(index)">
				{{ tab }}
			</view> -->
			</view>

			<!-- 分隔线 -->
			<view class="divider"></view>

			<!-- 产品列表 -->
			<view class="product-list">
				<view class="product-item" v-for="(product, index) in products" :key="index">
					<view class="" style="display: flex;">
						<view class="product-image">
							<image src="../../static/1.jpg" mode="aspectFill"></image>
						</view>
						<view class="product-details">
							<view class="product-title">{{ product.title }}</view>
							<view class="product-tags">
								<view class="tag high-commission">{{ t('index.HighCommissions') }}</view>
								<view class="tag commission-rate">{{ product.commissionRate }}</view>
							</view>
							<view class="product-earn">{{t('index.Earn')}} {{ product.earnRange }}</view>
							<view class="product-price-row">
								<view class="product-price">{{ product.price }}</view>
								<view class="product-sold" v-if="product.sold">{{ product.sold }} {{t('product.Sold')}}
								</view>
							</view>

						</view>
					</view>
					<view class="product-remaining">
						<view>{{t('product.Remaining')}} {{ product.remaining }} {{ t('product.Units') }}</view>
						<view class="progress-bar">
							<tn-line-progress active-color="#ff4d6a" :percent="progressPercent"
								height='6rpx'></tn-line-progress>
						</view>
						<tn-button bg-color="#ff4d6a" text-color="#ffffff" padding="10rpx 60rpx"
							radius="8rpx">{{ t('common.Get') }}</tn-button>
					</view>
					<!-- <view class="product-action">
				
				</view> -->
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import navBar from "../../components/navBar/index.vue"
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	// 分类选项卡数据
	const tabs = [{
		text: t("common.all")
	}, {
		text: t("product.FoodHealth")
	}, {
		text: t("product.BeautyPersonal")
	}, {
		text: t("product.ELAppli")
	}];
	const currentTab = ref(0);
	const progressPercent = ref(30)
	// 切换选项卡
	const switchTab = (index) => {
		currentTab.value = index;
	};

	// 产品数据
	const products = ref([{
			image: '/static/images/product1.png',
			title: 'ชุดเครื่องมือสายการผลิต แพ็ค 523w',
			commissionRate: '23%',
			earnRange: '10.810฿-38.640฿',
			price: '47.000฿',
			sold: '131.3k Sold',
			remaining: 27,
			progress: 70
		},
		{
			image: '/static/images/product2.png',
			title: 'ชุดเครื่องมือสายการผลิต แพ็ค 523w',
			commissionRate: '23%',
			earnRange: '10.810฿-38.640฿',
			price: '47.000฿',
			remaining: 27,
			progress: 50
		},
		{
			image: '/static/images/product3.png',
			title: 'ชุดเครื่องมือสายการผลิต แพ็ค 523w',
			commissionRate: '23%',
			earnRange: '10.810฿-38.640฿',
			price: '47.000฿',
			remaining: 27,
			progress: 30
		}
	]);
	const bgHeight = ref(88); // 初始背景高度
	const startY = ref(0)
	const contentMarginTop = ref(0); // 让内容同步向下移动
	// 记录起始触摸点
	const handleTouchStart = (e) => {
		startY.value = e.touches[0].pageY;
	};

	// 计算下拉位移
	const handleTouchMove = (e) => {
		let moveY = e.touches[0].pageY - startY.value;
		// contentMarginTop.value = moveY
		if (moveY > 0) {
			bgHeight.value = Math.min(88 + moveY, 250); // 背景最大高度 450px
			contentMarginTop.value = Math.min(0 + moveY, 150); // 内容同步向下移动
		}
	};

	// 松手后恢复
	const handleTouchEnd = () => {
		const timer = setInterval(() => {
			if (bgHeight.value > 88) {
				bgHeight.value -= 5;
				contentMarginTop.value -= 5;
			} else {
				clearInterval(timer);
			}
		}, 10);
	};
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: url("../../static/my/bg.png") no-repeat center center / cover;
	}

	/* 头部区域样式 */
	.header-section {
		padding: 40rpx;
		border-bottom: 2rpx dashed #e0e0e0;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
	}

	.header-text {
		flex: 1;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.header-subtitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.header-stats {
		font-size: 26rpx;
		color: #666;
	}

	.highlight {
		color: #ff4d6a;
		font-weight: bold;
	}

	.header-image {
		width: 202rpx;
		height: 202rpx;
	}

	.header-image image {
		width: 100%;
		height: 100%;
	}

	/* 分类选项卡样式 */
	.category-tabs {
		display: flex;
		background-color: #ffffff;
		padding: 0 30rpx;
	}

	.tab {
		padding: 20rpx 0;
		margin-right: 40rpx;
		font-size: 28rpx;
		color: #999;
		position: relative;
	}

	.tab.active {
		color: #ff4d6a;
		font-weight: bold;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 6rpx;
		background-color: #ff4d6a;
		border-radius: 3rpx;
	}

	.divider {
		height: 2rpx;
		background-color: #f0f0f0;
	}

	/* 产品列表样式 */
	.product-list {
		padding: 20rpx;
	}

	.product-item {
		display: flex;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		flex-direction: column;
	}

	.product-image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.product-image image {
		width: 100%;
		height: 100%;
	}

	.product-details {
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		line-height: 1.4;
	}

	.product-tags {
		display: flex;
		margin-bottom: 10rpx;
		width: 308rpx;
		height: 40rpx;
		background: #FD2D55;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		justify-content: space-between;
	}

	.tag {
		font-size: 22rpx;
		border-radius: 6rpx;
	}

	.high-commission {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
		flex: 1;
		height: 40rpx;
	}

	.commission-rate {
		background-color: #fff;
		color: #ff4d6a;
		line-height: 40rpx;
		margin: 1rpx;
		height: 36rpx;
	}

	.product-earn {
		font-size: 24rpx;
		color: #ff4d6a;
		margin-bottom: 10rpx;
	}

	.product-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.product-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.product-sold {
		font-size: 22rpx;
		color: #999;
	}

	.product-remaining {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 32rpx;
		margin-top: 32rpx;
		display: flex;
		align-items: center;
	}

	.progress-bar {
		height: 6rpx;
		background-color: #f0f0f0;
		border-radius: 3rpx;
		margin-top: 8rpx;
		flex: 1;
		margin-left: 12rpx;
		margin-right: 40rpx;
	}

	.progress {
		height: 100%;
		background-color: #ff4d6a;
	}

	.product-action {
		position: absolute;
		right: 0;
		bottom: 0;
	}
</style>